<template>
  <div>
    <!-- 首页入口 -->
    <div class="home-entry">
      <!-- 因为container类是版心，而有的div是通栏，所以不能做根标签的类 -->
      <div class="container">
        <!-- 左侧分类 -->
        <HomeCategory />

        <!-- 轮播图 -->
        <HomeBanner />
      </div>
    </div>
    <!-- 新鲜好物 -->
    <HomeNew />
    <!-- 人气推荐 -->
    <HomeHot />
    <!-- 产品区块 -->
    <HomeProduct />
    <!-- 最新专题 -->
    <HomeSpecial />
  </div>
</template>

<script>
import HomeCategory from './components/HomeCategory.vue'
import HomeBanner from './components/HomeBanner.vue'
import HomeNew from './components/HomeNew.vue'
import HomeHot from './components/HomeHot.vue'
import HomeProduct from './components/HomeProduct.vue'
import HomeSpecial from './components/HomeSpecial.vue'
export default {
  name: 'HomePage',
  components: { HomeCategory, HomeBanner, HomeNew, HomeHot, HomeProduct, HomeSpecial }
}
</script>

<style scoped lang="less">
// 已经在vue.config.js中通过插件实现自动导入了
// @import '../../assets/styles/variable.less';
// @import '../../assets/styles/mixins.less';

.container {
  // 调用less函数
  .hoverShadow();
  color: @xtxColor;
}
</style>
